<template>
    <el-container class="app-layout">
        <!--左侧菜单栏-->
        <el-aside class="aside" :width="'auto'" style="height:100vh;overflow:hidden">
            <c-side-bar />
        </el-aside>
        <el-container class="container">
            <!--页面头部-->
            <el-header class="header" height="100px">
                <c-header />
            </el-header>

            <!--页面内容-->
            <el-main class="content">
                <div class="page-container">
                    <router-view v-slot="{ Component }">
                        <transition name="slide-fade">
                            <keep-alive>
                                <component :is="Component" />
                            </keep-alive>
                        </transition>
                    </router-view>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>


<script setup>
import CHeader from '@/components/layout/Header.vue'
import CSideBar from '@/components/layout/SideBar.vue'
</script>

<style scoped lang="scss">
.app-layout {
    width: 100%;
    height: 100vh;

    .header {
        padding: 0;
        // z-index: 10;
    }

    .container {
        overflow: auto; /* 替换原来的 overflow: hidden auto */
        height: calc(100vh - 100px); /* 根据 header 高度调整 */
        // z-index: 8;

        .aside {
            // z-index: 6;
            box-shadow: 1px 2px 8px 0 rgba(223, 227, 235, 0.66);

            // 去掉滚动条
            &::-webkit-scrollbar {
                width: 0;
                background-color: transparent;
            }
        }

        .content {
            height: calc(100% - 1px);
            overflow-y: hidden;
            height: 100%;
            position: relative;
            z-index: 4;
            // background-color: #F4F3F9;
            padding: 0;

            .page-container {
                box-sizing: border-box;
                overflow-x: auto;
                min-width: 1200px;


                .slide-fade-enter-active {
                    transition: all .3s .8s ease;
                }

                .slide-fade-leave-active {
                    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
                }

                .slide-fade-enter,
                .slide-fade-leave-to {
                    transform: translateX(10px);
                    opacity: 0;
                }
            }
        }
    }
}
</style>